<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            float: left;
            margin: 10px;
        }

        label{
            font-size: 120PX;
            vertical-align: middle;

        }
        input {
            width: 120px;
            height: 120px;
            vertical-align: middle;
        }
    </style>
</head>

<body>



    <div class="container">
        <div class="radio">
            <input type="radio" value="Male" name='gender' id='male' />
            <label for="male">male</label>
        </div>
    </div>
    <div class="container">
        <div class="radio">
            <input type="radio" value="Female" name='gender' id='female' />
            <label for="female">female</label>
        </div>
    </div>

    
    <p style="clear: both;"></p>
    <p style="clear: both;"></p>
    
    <H2>注意: 需要给 radio 添加不同的 name 属性, 不然就是下面这种情况 : </H2>

    <input type="radio" value="Male" name='gender1' id='male' />
    <input type="radio" value="Male" name='gender2' id='male' />

</body>

</html>